<template>
  <ul class="navTitle">
    <li class="nav" @click="check(index)" :class="{'active': activeIndex==index}" v-for="(item, index) in navArr" :key="index">{{ item }}</li>
    <li class="lastRight">
      <slot name="right"></slot>
    </li>
  </ul>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'navTitle',
  props: {
    navArr: {
      type: Array
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
    }
  },
  methods: {
    check (index) {
      this.$emit('check', index)
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.navTitle
  display flex
  border-bottom 1px solid #dddddd
  li
    padding-bottom 15px
    transition all 0.3s
  .nav
    padding-top 20px
    margin-right 60px
    cursor pointer
    border-bottom 0px solid $mainColor
    fontSize($fontSize-l, 1, $fontColor)
    font-weight bold
    &:hover
      border-bottom 4px solid $mainColor
      border-radius 1px
  .lastRight
    flex 1
    text-align right
    align-self flex-end
  .active
    border-bottom 4px solid $mainColor
    border-radius 1px
</style>
